<template>
	<view @click="clickCard" class="bill_card_box" v-if="billData?.id">
		<view class="icon">
			<MyIcons size="60rpx" :src="joinSystemPath(billData.billType.billIcon)"/>
		</view>
		<view class="content_bill_card">
			<view class="header_bill_card">
				<view class="type_name text_ellipsis">
					{{billData.billType.billType_name}}
				</view>
				<view 
					:class="['money','text_ellipsis',
					{'money_add' :billData.in_out_type === BillInOutType.IN}]">
					{{billData.in_out_type === BillInOutType.IN ? `+${billData.money}` : `-${billData.money}`}}
				</view>
			</view>
			<view class="footer">
				<view class="time text_ellipsis">
					{{deleteStrByPatten(billData.time,/^\d{4}-/).slice(0,-3)}}
				</view>
				<view class="info text_ellipsis">
					{{billData.info}}
				</view>
			</view>
		</view>
	</view>
	<AdBanner width="100%" :itemIndex="itemIndex"/>
</template>

<script setup>
	import {
		joinSystemPath
	} from '@/utils/imgJoinName.js'
	
	import {
		deleteStrByPatten,
	} from '@/utils/changeData.js'
	
	import AdBanner from '@/components/AdBanner/AdBanner.vue'
	
	import {BillInOutType} from '@/enum/GlobalEnum.js'
	
	import {dynamicStyleStore} from '@/stores/dynamicStyle.js'
	
	const dynamicStyle_store = dynamicStyleStore()
	
	const {
		primary_text_color,
		shallow_text_color,
		primary_text_hot_color
	} = dynamicStyle_store.dormitoryStyle
	
	const props=defineProps({
		billData:{
			type:Object
		},
		itemIndex:{
			type:Number,
			default:-1
		}
	})
	const emits=defineEmits(['clickBillCardEmit'])
	
	const clickCard=()=>{
		emits('clickBillCardEmit',props.billData)
	}
</script>

<style lang="less">
	.text_ellipsis {
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}
	.bill_card_box{
		background-color: #FFFFFF;
		padding: 20rpx;
		margin-top: 20rpx;
		border-radius: 10rpx;
		display: flex;
		color: v-bind(primary_text_color);
		.icon{
			width: 12%;
			display: flex;
			align-items: center;
			margin-right: 10rpx;
		}
		.content_bill_card{
			display: flex;
			flex-direction: column;
			width: 85%;
			.header_bill_card{
				display: flex;
				width: 100%;
				.type_name{
					width: 50%;
					font-size: 30rpx;
					margin-bottom: 10rpx;
				}
				.money{
					width: 50%;
					text-align: end;
				}
				.money_add{
					color: v-bind(primary_text_hot_color) !important;
				}
			}
			.footer{
				display: flex;
				font-size: 25rpx;
				color: v-bind(shallow_text_color);
				letter-spacing: 2rpx;
				.time{
					width: 38%;
				}
				.info{
					width: 62%;
				}
			}
		}
	}
</style>